<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-descriptions title="销售订单号">
        <a-descriptions-item label="销售员">1000000000</a-descriptions-item>
        <a-descriptions-item label="销售组">已取货</a-descriptions-item>
        <a-descriptions-item label="销售经理">1234123421</a-descriptions-item>
        <a-descriptions-item label="订单当前阶段">3214321432</a-descriptions-item>
      </a-descriptions>
      <a-card
        style="width:100%"
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tabChange="key => onTabChange(key, 'noTitleKey')"
      >
        <p v-if="noTitleKey === 'article'">
          <a-form-model :model="formInline1" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.native.prevent>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Fist Name">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="Street">
                  <a-input v-model="formInline.user" placeholder="Street">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="SSN">
                  <a-input v-model="formInline.user" placeholder="SSN">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Middle Name">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="City">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Last Name">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="State">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="DOB">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="Zip">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Customer phone number">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="Driver license-state">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Customer email address">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="Driver license-No">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Customer's wechat">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="Driver license Expiration">
                  <a-input v-model="formInline.password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2" :offset="22">
                <a-form-model-item>
                  <a-button type="primary">保存</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </p>
        <p v-if="noTitleKey === 'app'">
          <a-form-model :model="formInline" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.native.prevent>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="请选择车辆">
                  <a-select v-model="formInline.region" placeholder="please select your zone">
                    <a-select-option value="shanghai">
                      Zone one
                    </a-select-option>
                    <a-select-option value="beijing">
                      Zone two
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="VIN">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="vehicle">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="车辆ID">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2" :offset="22">
                <a-form-model-item>
                  <a-button type="primary">保存</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </p>
        <p v-if="noTitleKey === 'hetong'">
          <a-form-model :model="formInline" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.native.prevent>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="请选择车辆">
                  <a-select v-model="formInline.region" placeholder="please select your zone">
                    <a-select-option value="shanghai">
                      Zone one
                    </a-select-option>
                    <a-select-option value="beijing">
                      Zone two
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="VIN">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="vehicle">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="车辆ID">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2" :offset="22">
                <a-form-model-item>
                  <a-button type="primary">保存</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </p>
        <p v-if="noTitleKey === 'shoukuan'">
          <a-form-model :model="formInline" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.native.prevent>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="实收总和">
                  <a-input v-model="formInline.user" placeholder="实收总和"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="应收余额">
                  <a-input v-model="formInline.user" placeholder="First Name"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="收款记录">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="Pending余额">
                  <a-input v-model="formInline.user" placeholder="实收总和"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="实际余额">
                  <a-input v-model="formInline.user" placeholder="First Name"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2" :offset="22">
                <a-form-model-item>
                  <a-button type="primary">保存</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </p>
        <!--提成-->
        <p v-if="noTitleKey === 'tic'">
          <a-form-model :model="formInline" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.native.prevent>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="实收综合">
                  <a-select v-model="formInline.region" placeholder="please select your zone">
                    <a-select-option value="shanghai">
                      Zone one
                    </a-select-option>
                    <a-select-option value="beijing">
                      Zone two
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="PKG Fee">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="总成本">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="业绩">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="利润">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="提成比例">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8" :offset="8">
                <a-form-model-item label="提成">
                  <a-input v-model="formInline.user" placeholder="First Name">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2" :offset="22">
                <a-form-model-item>
                  <a-button type="primary">保存</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </p>
        <p v-if="noTitleKey === 'files'">
          <a-list class="demo-loadmore-list" :loading="loading" item-layout="horizontal" :data-source="data">
            <a-list-item slot="renderItem" slot-scope="item">
              <a slot="actions">下载</a>
              <a slot="actions">删除</a>
              <a-list-item-meta description="D://test/apc.zip">
                <a slot="title" href="https://www.antdv.com/">{{ item.name.last }}</a>
                <a-avatar slot="avatar" icon="file-zip"/>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </p>
      </a-card>

    </a-card>
  </page-header-wrapper>
</template>

<script>

  export default {
    data () {
      return {
        data: [{ 'gender': 'female', 'name': { 'title': 'Miss', 'first': 'Harriet', 'last': 'Sänger' }, 'email': 'harriet.sanger@example.com', 'nat': 'DE' }, { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Adrian', 'last': 'Esser' }, 'email': 'adrian.esser@example.com', 'nat': 'DE' }, { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Andreas', 'last': 'Nielsen' }, 'email': 'andreas.nielsen@example.com', 'nat': 'DK' }, { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Joshua', 'last': 'Payne' }, 'email': 'joshua.payne@example.com', 'nat': 'US' }, { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Jonathan', 'last': 'Olsen' }, 'email': 'jonathan.olsen@example.com', 'nat': 'DK' }],
        labelCol: { span: 10 },
        wrapperCol: { span: 14 },
        tabListNoTitle: [
          {
            key: 'article',
            tab: '客户信息'
          },
          {
            key: 'app',
            tab: '选择库存车辆'
          },
          {
            key: 'hetong',
            tab: '合同信息'
          },
          {
            key: 'shoukuan',
            tab: '收款信息'
          },
          {
            key: 'tic',
            tab: '预览提成'
          },
          {
            key: 'files',
            tab: '附件'
          }
        ],
        formInline: {
          user: '',
          password: ''
        },
        formInline1: {},
        key: 'tab1',
        noTitleKey: 'article',
        goodsColumns: [
          {
            title: '商品编号',
            dataIndex: 'id',
            key: 'id'
          },
          {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name'
          },
          {
            title: '商品条码',
            dataIndex: 'barcode',
            key: 'barcode'
          },
          {
            title: '单价',
            dataIndex: 'price',
            key: 'price',
            align: 'right'
          },
          {
            title: '数量（件）',
            dataIndex: 'num',
            key: 'num',
            align: 'right'
          },
          {
            title: '金额',
            dataIndex: 'amount',
            key: 'amount',
            align: 'right'
          }
        ],
        scheduleColumns: [
          {
            title: '时间',
            dataIndex: 'time',
            key: 'time'
          },
          {
            title: '当前进度',
            dataIndex: 'rate',
            key: 'rate'
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '操作员ID',
            dataIndex: 'operator',
            key: 'operator'
          },
          {
            title: '耗时',
            dataIndex: 'cost',
            key: 'cost'
          }
        ]
      }
    },
    filters: {
      statusFilter (status) {
        const statusMap = {
          'processing': '进行中',
          'success': '完成',
          'failed': '失败'
        }
        return statusMap[status]
      }
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    },
    methods: {
      onTabChange (key, type) {
        console.log(key, type)
        this[type] = key
      }
    }
  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>
